
.my-shop{
	.loading{
		
	}
	.nav-box{
		width: 750upx;
		height: 206upx;
		margin-top: 1upx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		background-color: #FFFFFF;
		.img{
			image{
				width: 80upx;
				height: 80upx;
				margin-left: 30upx;
				border-radius: 10upx;
				border: solid 2upx #cccccc;
			}
		}
		.shopName{
			display: flex;
			flex-direction: column;
			justify-content:center;
			width: 470upx;
			font-size: 30upx;
			color: #333;
			margin-left: 20upx;
			.address{
				line-height: 40upx;
				font-size: 20upx;
				image{
					width: 21upx;
					height: 29upx;
					margin-right: 10upx;
				}
			}
			.person{
				color: $bg02;
				font-size: 30upx;
				.iconfont{
					font-size: 28upx;
					margin-right: 10upx;
				}
			}
			.play{
				font-size: 30upx;
				color: $bg02;
				line-height: 50upx;
				image{
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}
			}
		}
		.count{
			display: flex;
			flex-direction: column;
			justify-content:center;
			align-items: flex-end;
			color: #FFFFFF;
			margin-right: 20upx;
			.count-btn{
				font-size: 20upx;
				width: 110upx;
				height: 30upx;
				background-color: $bg02;
				border-radius: 10upx;
				display: flex;
				justify-content:center;
				align-items: center;
			}
			.count-title{
				font-size: 24upx;
				line-height: 60upx;
				color: $bg02;
			}
			.attent-box{
				&>view{
					width: 100upx;
					height: 40upx;
					border-radius: 30upx;
					border: 1px solid #999999;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999999;
				}
				.attention{
					border: 1px solid #ff557d;
					color: #ff557d;
					font-size: 24upx;
				}
				.noAttention{
					border: 1px solid #999999;
					color: #999999;
					font-size: 24upx;
				}
			}
		}
		
	}
	
	.ctry-content{
		margin: 0upx 0upx;
	}
	
	.nav-left{
		width: 150upx;
		background-color: $bg01;
		// position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		font-size: 24upx;
		color: $color3;
		.nav-left-item {
			display: flex;
			line-height: 90upx;
			text-align: center;
			justify-content: center;
		}
		.nav-active{
			font-size: 26upx;
			color: $bg02;
			position: relative;
			&:after{
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 16upx;
				width: 50upx;
				height: 4upx;
				background-color: #ff557d;
				border-radius: 2upx;
			}
		}
	}
	.nav-right{
		width: 600upx;
		position: absolute;
		left: 150upx;
		top: 206upx;
		bottom: 0;
		background-color: #f9f9f9;
		box-sizing: border-box;
		padding-left: 10upx;
		background-color: #FFFFFF;
	}
		.top-img{
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			background-color: #faf2f5;
			font-size: 30upx;
			display: flex;
			color: #333;
			.top-item{
				flex: 1;
				.iconfont{
					color: #666;
					font-size: 20upx;
					margin-left: 6upx;
				}
			}
			.item-active{
				color: $bg02;
				.iconfont{
					color: $bg02;
				}
			}
		}
		
		// 分类内容部分
		.nav-right-content{
			width: 100%;
			height: calc(100% - 80upx);
			.nav-right-box{
				display: flex;
				// flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				.nav-right-item{
					width: 568upx;
					height: 178upx;
					border-top: 1px solid #faf2f5;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 131upx;
						height: 131upx;
						border-radius: 10upx;
					}
					.right-box{
						width: 410upx;
						height: 137upx;
						.right-content1{
							font-size: 26upx;
							color: #2e2e2e;
							display: flex;
							align-items: center;
							.header{
								margin-left: 10upx;
								width: 264upx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							.title{	
								// width: 94upx;
								padding: 0 10upx;
								height: 30upx;
								line-height: 30upx;
								background-color: $bg02;
								border-radius: 10upx;
								color: #FFFFFF;
								font-size: 20upx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
						.right-content2{
							font-size: 24upx;
							color: #999999;
							margin-top: 30upx;
							text-decoration: line-through;
						}
						.number{
							color: $bg02;
							
							padding-right: 20upx;
							padding-left: 10upx;
						}
						.right-content3{
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: $font-base - 6upx;
							padding-right: 10upx;
							&>text{
								font-weight: bold;
								color: $bg02;
								font-size: 30upx;
							}
							&>view{
								display: flex;
								align-items: center;
								justify-content: space-between;
								color: #666;
								&>view{
									width: 60upx;
									height: 34upx;
									font-size: 20upx;
									border-radius: 10upx;
									border: 1px solid #666;
									display: flex;
									align-items: center;
									justify-content: center;
								}
								&>view:first-child{
									margin-right: 40upx;
								}
							}
							.shoppingCart{
								&>image{
									width: 45upx;
									height: 39upx;
								}
							}
						}
					}
				}
			}
			
		}
		
		
}
